<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Invalid State</h1>
        <p>All form components have an invalid state style to display the validation errors when <i>ng-invalid ng-dirty</i> combination is applied by Angular.</p>
    </div>
    <app-demoActions github="invalid"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <div class="p-fluid grid">
            <div class="field col-12 md:col-4">
                <input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty" placeholder="InputText">
            </div>
            <div class="field col-12 md:col-4">
                <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty" placeholder="AutoComplete"></p-autoComplete>
            </div>
            <div class="field col-12 md:col-4">
                <p-calendar inputId="calendar" [(ngModel)]="value3" class="ng-invalid ng-dirty" [showIcon]="true" placeholder="Calendar"></p-calendar>
            </div>
            <div class="field col-12 md:col-4">
                <p-chips inputId="chips" [(ngModel)]="value4" class="ng-invalid ng-dirty" placeholder="Chips"></p-chips>
            </div>
            <div class="field col-12 md:col-4">
                <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty" placeholder="InputMask"></p-inputMask>
            </div>
            <div class="field col-12 md:col-4">
                <p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty" placeholder="InputNumber"></p-inputNumber>
            </div>
            <div class="field col-12 md:col-4">
                <p-cascadeSelect [options]="cascadeSelectCountries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="ng-invalid ng-dirty" placeholder="CascadeSelect"></p-cascadeSelect>
            </div>
            <div class="field col-12 md:col-4">
                <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value7" optionLabel="name" class="ng-invalid ng-dirty" placeholder="Dropdown"></p-dropdown>
            </div>
            <div class="field col-12 md:col-4">
                <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value8" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty" placeholder="MultiSelect"></p-multiSelect>
            </div>
            <div class="field col-12 md:col-4">
                <p-password [(ngModel)]="value9" placeholder="Password" class="ng-invalid ng-dirty"></p-password>
            </div>
            <div class="field col-12 md:col-4">
                <p-treeSelect [(ngModel)]="value10" [options]="files" placeholder="TreeSelect" class="ng-invalid ng-dirty"></p-treeSelect>
            </div>
            <div class="field col-12 md:col-4">
                <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value11" pInputTextarea class="ng-invalid ng-dirty" placeholder="Textarea"></textarea>
            </div>
        </div>
    </div>
</div>

<div class="content-section documentation">
<p-tabView>

    <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/invalid" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-fluid grid"&gt;
&lt;div class="card"&gt;
    &lt;div class="p-fluid grid"&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty" placeholder="InputText"&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty" placeholder="AutoComplete"&gt;&lt;/p-autoComplete&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-calendar inputId="calendar" [(ngModel)]="value3" class="ng-invalid ng-dirty" [showIcon]="true" placeholder="Calendar"&gt;&lt;/p-calendar&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-chips inputId="chips" [(ngModel)]="value4" class="ng-invalid ng-dirty" placeholder="Chips"&gt;&lt;/p-chips&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty" placeholder="InputMask"&gt;&lt;/p-inputMask&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty" placeholder="InputNumber"&gt;&lt;/p-inputNumber&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-cascadeSelect [options]="cascadeSelectCountries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" class="ng-invalid ng-dirty" placeholder="CascadeSelect"&gt;&lt;/p-cascadeSelect&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value7" optionLabel="name" class="ng-invalid ng-dirty" placeholder="Dropdown"&gt;&lt;/p-dropdown&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value8" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty" placeholder="MultiSelect"&gt;&lt;/p-multiSelect&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-password [(ngModel)]="value9" placeholder="Password" class="ng-invalid ng-dirty"&gt;&lt;/p-password&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;p-treeSelect [(ngModel)]="value10" [options]="files" placeholder="TreeSelect" class="ng-invalid ng-dirty"&gt;&lt;/p-treeSelect&gt;
        &lt;/div&gt;
        &lt;div class="field col-12 md:col-4"&gt;
            &lt;textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value11" pInputTextarea class="ng-invalid ng-dirty" placeholder="Textarea"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class FloatLabelDemo &#123;

    countries: any[];

    cascadeSelectCountries: any[];

    cities: any[];

    files: any[];

    filteredCountries: any[];

    value1: any;

    value2: any;

    value3: any;

    value4: any;

    value5: any;

    value6: any;

    value7: any;

    value8: any;

    value9: any;

    value10: any;

    value11: any;


    constructor(private countryService: CountryService, private nodeService: NodeService) &#123;
        this.cities = [
            &#123;name: 'New York', code: 'NY'&#125;,
            &#123;name: 'Rome', code: 'RM'&#125;,
            &#123;name: 'London', code: 'LDN'&#125;,
            &#123;name: 'Istanbul', code: 'IST'&#125;,
            &#123;name: 'Paris', code: 'PRS'&#125;
        ];
    &#125;

    ngOnInit() &#123;
        this.countryService.getCountries().then(countries =&gt; &#123;
            this.countries = countries;
        &#125;);

        this.cascadeSelectCountries = [
            &#123;
                name: 'Australia',
                code: 'AU',
                states: [
                    &#123;
                        name: 'New South Wales',
                        cities: [
                            &#123;cname: 'Sydney', code: 'A-SY'&#125;,
                            &#123;cname: 'Newcastle', code: 'A-NE'&#125;,
                            &#123;cname: 'Wollongong', code: 'A-WO'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Queensland',
                        cities: [
                            &#123;cname: 'Brisbane', code: 'A-BR'&#125;,
                            &#123;cname: 'Townsville', code: 'A-TO'&#125;
                        ]
                    &#125;,

                ]
            &#125;,
            &#123;
                name: 'Canada',
                code: 'CA',
                states: [
                    &#123;
                        name: 'Quebec',
                        cities: [
                            &#123;cname: 'Montreal', code: 'C-MO'&#125;,
                            &#123;cname: 'Quebec City', code: 'C-QU'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Ontario',
                        cities: [
                            &#123;cname: 'Ottawa', code: 'C-OT'&#125;,
                            &#123;cname: 'Toronto', code: 'C-TO'&#125;
                        ]
                    &#125;,

                ]
            &#125;,
            &#123;
                name: 'United States',
                code: 'US',
                states: [
                    &#123;
                        name: 'California',
                        cities: [
                            &#123;cname: 'Los Angeles', code: 'US-LA'&#125;,
                            &#123;cname: 'San Diego', code: 'US-SD'&#125;,
                            &#123;cname: 'San Francisco', code: 'US-SF'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Florida',
                        cities: [
                            &#123;cname: 'Jacksonville', code: 'US-JA'&#125;,
                            &#123;cname: 'Miami', code: 'US-MI'&#125;,
                            &#123;cname: 'Tampa', code: 'US-TA'&#125;,
                            &#123;cname: 'Orlando', code: 'US-OR'&#125;
                        ]
                    &#125;,
                    &#123;
                        name: 'Texas',
                        cities: [
                            &#123;cname: 'Austin', code: 'US-AU'&#125;,
                            &#123;cname: 'Dallas', code: 'US-DA'&#125;,
                            &#123;cname: 'Houston', code: 'US-HO'&#125;
                        ]
                    &#125;
                ]
            &#125;
        ];

        this.nodeService.getFiles().then(files =&gt; this.files = files);
    &#125;

    searchCountry(event) &#123;
        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
        let filtered : any[] = [];
        let query = event.query;
        for(let i = 0; i &lt; this.countries.length; i++) &#123;
            let country = this.countries[i];
            if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) &#123;
                filtered.push(country);
            &#125;
        &#125;

        this.filteredCountries = filtered;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
